<template>
  <a-card>
    <div class="flex flex-col w-full">
      <h1 class="text-[1.5rem] font-bold mb-4">配置时间段</h1>
      <div class="flex justify-between">
        <a-radio-group
          v-model:value="form.timeType"
          :options="planOptions"
          @change="reset"
          option-type="button"
        />
        <a-button type="ghost" class="create-btn" @click="create">
          创建
          <template #icon>
            <plus-outlined />
          </template>
        </a-button>
      </div>
      <a-card class="mt-4">
        <div v-if="form.timeType === SCHEDULE_TYPE_ENUM.WEEKLY" class="mb-4">
          <WeekSelector @change="setWeek" v-model:value="form.week"></WeekSelector>
        </div>
        <ul class="flex gap-4 flex-col">
          <li class="mb-4">
            <span class="text-gray-500 font-bold">时间段</span>
          </li>
          <template v-if="form.publishTime.length > 0">
            <li class="flex justify-between" v-for="item in form.publishTime" :key="item.id">
              <div
                v-if="
                  form.timeType === SCHEDULE_TYPE_ENUM.ONE_TIME ||
                  form.timeType === SCHEDULE_TYPE_ENUM.CUSTOM_DATE
                "
              >
                <a-range-picker
                  :format="'YYYY-MM-DD HH:mm:ss'"
                  show-time
                  v-model:value="item.time"
                  @change="setDate(item)"
                />
              </div>
              <div
                v-if="
                  form.timeType === SCHEDULE_TYPE_ENUM.DAILY ||
                  form.timeType === SCHEDULE_TYPE_ENUM.WEEKLY
                "
              >
                <a-time-range-picker v-model:value="item.time" @change="setTime(item)" />
              </div>

              <a-button danger @click="remove(item.id)">删除</a-button>
            </li>
          </template>
          <a-empty v-else>
            <template #description>
              <a-button type="primary" @click="create">
                创建
                <template #icon>
                  <plus-outlined />
                </template>
              </a-button>
            </template>
          </a-empty>
        </ul>
      </a-card>
    </div>
  </a-card>
</template>

<script setup lang="ts">
import { planOptions } from '@/data/system.options';
import { form } from '../../data/form';
import { nanoid } from 'nanoid';
import { SCHEDULE_TYPE_ENUM } from '@/enum/system';
import { type PublishTime } from '@/api/modules/lcd/publicize';
const dateFormat = 'YYYY-MM-DD HH:mm:ss';

const timeFormat = 'HH:mm:ss';

const create = () => {
  form.value.publishTime.push({
    start: '',
    end: '',
    work: [],
    id: nanoid(),
    time: [],
  });
};
const setTime = (item: PublishTime) => {
  if (!item.time) return;
  item.start = item.time[0].format(timeFormat);
  item.end = item.time[1].format(timeFormat);
};
const setWeek = () => {};
const setDate = (item: PublishTime) => {
  if (!item.time) return;
  const [startDate, startTime] = item.time[0].format(dateFormat).split(' ');
  const [endDate, endTime] = item.time[1].format(dateFormat).split(' ');
  item.start = startTime;
  item.end = endTime;
  item.work = [startDate, endDate];
};
const remove = (id: string) => {
  form.value.publishTime = form.value.publishTime.filter(e => e.id !== id);
};

const reset = () => {
  form.value.publishTime.forEach(e => {
    e.time = [];
    e.work = [];
  });
};
</script>

<style lang="scss" scoped>
.create-btn {
  border: 1px solid var(--primary);
  color: var(--primary);
}
</style>
